<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
import user from '@/api/user';
// person_age_counting
export default {
  name: "Age",
  data() {
    return {
      data: [
      ],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {  
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    async echarts() {
        let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      let res = await user.person_age_counting();
      let obj = res.data;
    
          let data = {names:['>65','50-65','40-50','30-40','15-30','<15'],list:obj}
          var option = {
            tooltip: {
              //提示框，鼠标悬浮交互时的信息提示
              show: true,
              trigger: "axis"
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              height: "100%",
              width:"94%",
              containLabel: true
            },

            xAxis: [
              {
                type: "category",
                data: data.names,
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: 6
                  }
                }
              }
            ],
            yAxis: [
              {
                type: "value",
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                }
              }
            ],
            series: [
              {
                type: "bar",
                stack: "人数",
                data: data.list,
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: "#02bcbc"
                  }
                }
              }
            ]
          };

          myChart.setOption(option);
        // });
    }
  }
};
</script>

<style>
</style>